<template>
    <div class="second_level_page sale_statistics_page">
        <section class="tab_section">
            <div @click="sale" :class="this.checkedEmp===1? 'tab active':'tab'">销售代表</div>
            <div @click="warehouse" :class="this.checkedEmp===2? 'tab active':'tab'">仓库管理员</div>
            <div @click="loading" :class="this.checkedEmp===3? 'tab active':'tab'">物流管理员</div>
        </section>
        <section class="statistics_main">

          <div class="header">
            <ul class="choose_time">
                <li  :class="this.checkedTime===1? 'active':''" >
                    <div @click="thisDay">今天</div>
                </li>
                <li :class="this.checkedTime===2? 'active':''">
                    <div  @click="thisMouth">本月</div>
                </li>
                <li  :class="this.checkedTime===3? 'active':''">
                    <div @click="lastMouth">上月</div>
                </li >
                <li :class="this.checkedTime===4? 'active':''">
  
                   <div  @click="toChoseTime()">自定义时间段</div>
         
                    
                </li>
            </ul>


            <div class="text">
                <div class="left" style="color:#666666;font-size:.3rem">时间段:&emsp;{{startAndEnd(this.startTime,this.endTime)}}</div>
                <div class="right" style="color:#666666;font-size:.3rem">{{empCount(this.emps.length)}}</div>
                <div class="clear" style="color:red"></div>
            </div>

        </div>

            <div v-if="this.checkedEmp===1" class="table" >
                <div class=" flex">
                    <div class="cell">名字</div>
                    <div class="cell">订单数</div>
                    <div v-if="" class="cell">金额(元)</div>
                    <div class="cell">商家数</div>
                    <div class="cell">新用户数</div>
                    
                </div>
                <div class="row head_row" v-for="todo in this.emps">
                    <div class="cell">{{todo.eName}}</div>
                    <div class="cell">{{totalNum(todo.totalNum)}}</div>
                    <div v-if="" class="cell">{{totalMoney(todo.totalMoney)}}</div>
                    <div class="cell">{{sellerNum(todo.sellerNum)}}</div>
                    <div class="cell">{{newNum(todo.newNum)}}</div>
                </div>   
                 <div class="row head_row fix"  style="margin-top:.5rem;">
                    <div class="cell" style="color:red">合计</div>
                    <div class="cell" style="color:red">{{orderCount(this.emps)}}</div>
                    <div class="cell" style="color:red">{{orderMoney(this.emps)}}</div>
                    <div class="cell" style="color:red">{{sellerCount(this.emps)}}</div>
                    <div class="cell" style="color:red">{{newSellerCount(this.emps)}}</div>
                </div> 
            </div>
            
             <div v-if="this.checkedEmp===2" class="table" >
                <div class="row head_row">
                    <div class="cell">名字</div>
                    <div class="cell">件数(已分/已完成)</div>
                    <div class="cell">金额(已分/已完成)</div>
                </div>
                <div class="row head_row" v-for="todo in this.emps">
                    <div class="cell">{{todo.eName}}</div>
                    <div class="cell">{{warehouseNum1(todo.distributionNum)}}/{{warehouseNum2(todo.completeNum)}}</div>
                    <div v-if="" class="cell">{{warehouseMoney1(todo.distributionMoney)}}/{{warehouseMoney2(todo.completeMoney)}}</div> 
                </div>
                <div class="row head_row fix"  style="margin-top:.5rem;">
                    <div class="cell" style="color:red">合计</div>
                    <div class="cell" style="color:red">{{warehouseCountNum(this.emps)}}</div>
                    <div class="cell" style="color:red">{{warehouseCountMoney(this.emps)}}</div>
                </div>
               
            </div>
            <div v-if="this.checkedEmp===3" class="table" >
                <div class="row head_row">
                    <div class="cell">名字</div>
                    <div class="cell">件数(已分/已完成)</div>
                    <div class="cell">金额(已分/已完成)</div>
                </div>

                <div class="row head_row" v-for="todo in this.emps">
                    <div class="cell">{{todo.eName}}</div>
                    <div class="cell">{{warehouseNum1(todo.distributionNum)}}/{{warehouseNum2(todo.completeNum)}}</div>
                    <div v-if="" class="cell">{{warehouseMoney1(todo.distributionMoney)}}/{{warehouseMoney2(todo.completeMoney)}}</div> 
                </div>

                <div class="row head_row fix"  style="margin-top:.5rem;">
                    <div class="cell" style="color:red">合计</div>
                    <div class="cell" style="color:red">{{loadingCountNum(this.emps)}}</div>
                    <div class="cell" style="color:red">{{loadingCountMoney(this.emps)}}</div>
                </div>
            </div>
        </section>
        
            <!-- <input id="demo1" type="text" readonly="" name="input_date" placeholder="日期选择特效" data-lcalendar="2011-01-1,2019-12-31" />
            <input id="demo2" value="2016-10-10" type="text" readonly="" name="input_date" placeholder="日期选择特效" data-lcalendar="2011-01-1,2019-12-31" /> -->

        <transition name="router-slid" mode="out-in">
            <router-view></router-view>
        </transition>
    </div> 
</template>

<script>           
    /*import 'src/plugins/lCalendar.js'
    import 'src/style/lCalendar.css'*/
    import {mapState} from 'vuex'
    import {StatisticalOfSale} from 'src/service/getData'
    import {fmoney} from 'src/config/mUtils'

    export default {
        data(){
            return{
                token:'',
                employeeId: {},
                flagTime:1,
                startTime : '',
                endTime : '',
                flag:1,
                emps :[],
                checkedTime:1,
                checkedEmp:1,
              
            }
        }, 
        mounted(){
            if(this.$route.query.token)
                this.token = this.$route.query.token;
            else
                this.token=this.userInfo.token;
            this.initData();
        },
        components: {
        }, 
        computed:{
        ...mapState([
            'userInfo',
            ])
        },        
        methods:{
        /*...mapMutations([
           'SAVE_AVANDER'
        ]),*/
        empCount(empCount){
            if(this.checkedEmp==1)
                return '共计:'+empCount+' 名销售人员';
            if(this.checkedEmp==2)
                return '共计:'+empCount+' 名仓管人员';
            if(this.checkedEmp==3)
                return '共计:'+empCount+' 名物流人员';
        },
        toChoseTime(){
            this.checkedTime=4;
            this.$router.replace({path:'/profile/statistics/saleStatistics/choseTime',query:{ toIndex:1}});
        },
        startAndEnd(startTime,endTime){
            if(startTime!=''&&endTime=='')
                return startTime;
            if(startTime==''&&endTime=='')
                return '';
            else
                return "    "+startTime+"——"+endTime;
        },

        totalNum(num){
            if(!num)
            {
                return 0;
            }else
            {
                return num;
            }
        },
        totalMoney(num){
            if(!num)
            {
                return "0.00";
            }else
            {
                return fmoney(num);
            }
        },
        sellerNum(num){
            if(!num)
            {
                return 0;
            }else
            {
                return num;
            }
        },
        newNum(num){
            if(!num)
            {
                return 0;
            }else
            {
                return num;
            }
        },
        warehouseNum1(num){
            if(!num)
            {
                return 0;
            }else
            {
                return num;
            }
        },
        warehouseNum2(num){
            if(!num)
            {
                return 0;
            }else
            {
                return num;
            }
        },
        warehouseMoney1(num){
            if(!num)
            {
                return "0.00";
            }else
            {
                return fmoney(num); 
            }
        },
        warehouseMoney2(num){
            if(!num)
            {
                return "0.00";
            }else
            {
                return fmoney(num);
            }
        },
        orderCount(emps){
            var count=0;
            for (var i =0 ;i<emps.length; i++) {
                if(!emps[i].totalNum)
                    emps[i].totalNum=0;
                count+=emps[i].totalNum;
            }
            return count;
        },
        orderMoney(emps){
            var count=0;
            for (var i =0 ;i<emps.length; i++) {
                if(!emps[i].totalMoney)
                    emps[i].totalMoney=0;
                count+=emps[i].totalMoney;  
            }
            return fmoney(count);
        },
        sellerCount(emps){
            var count=0;
            for (var i =0 ;i<emps.length; i++) {
                if(!emps[i].sellerNum)
                    emps[i].sellerNum=0;
                count+=emps[i].sellerNum;  
            }
            return count;
        },
        newSellerCount(emps){
            var count=0;
            for (var i =0 ;i<emps.length; i++) {
                if(!emps[i].newNum)
                    emps[i].newNum=0;
                count+=emps[i].newNum;  
            }
            return count;
        },
        warehouseCountNum(emps){
            var dCount=0;
            var cCount=0;
            for (var i =0 ;i<emps.length; i++) {
                if(!emps[i].distributionNum)
                    emps[i].distributionNum=0;
                if(!emps[i].completeNum)
                    emps[i].completeNum=0;
                dCount+=emps[i].distributionNum;  
                cCount+=emps[i].completeNum; 
            }
            return dCount+"/"+cCount;
        },
        warehouseCountMoney(emps){
            var dMoney=0;
            var cMoney=0;
            for (var i =0 ;i<emps.length; i++) {
                if(!emps[i].distributionMoney)
                    emps[i].distributionMoney=0;
                if(!emps[i].completeMoney)
                    emps[i].completeMoney=0;
                dMoney+=emps[i].distributionMoney;  
                cMoney+=emps[i].completeMoney; 
            }
            dMoney = fmoney(dMoney)
            cMoney = fmoney(cMoney);
            return dMoney+"/"+cMoney;
        },
        loadingCountNum(emps){
            var dCount=0;
            var cCount=0;
            for (var i =0 ;i<emps.length; i++) {
                if(!emps[i].distributionNum)
                    emps[i].distributionNum=0;
                if(!emps[i].completeNum)
                    emps[i].completeNum=0;
                dCount+=emps[i].distributionNum;  
                cCount+=emps[i].completeNum; 
            }
            return dCount+"/"+cCount;
        },
        loadingCountMoney(emps){
            var dMoney=0;
            var cMoney=0;
            for (var i =0 ;i<emps.length; i++) {
                if(!emps[i].distributionMoney)
                    emps[i].distributionMoney=0;
                if(!emps[i].completeMoney)
                    emps[i].completeMoney=0;
                dMoney+=emps[i].distributionMoney;  
                cMoney+=emps[i].completeMoney; 
            }
            dMoney = fmoney(dMoney); 
            cMoney = fmoney(cMoney); 
            return dMoney+"/"+cMoney;
        },

        thisDay(){
            this.checkedTime=1;
            this.flagTime=1;
            this.startTime='';
            this.endTime='';
            this.getEnableVoucherNum();
        },
        thisMouth(){
            this.checkedTime=2;
            this.flagTime=2;
            this.startTime='';
            this.endTime='';
            this.getEnableVoucherNum();
        },
        lastMouth(){
            this.checkedTime=3;
            this.flagTime=3;
            this.startTime='';
            this.endTime='';
            this.getEnableVoucherNum();
        },

        sale(){
            this.checkedEmp=1;
            this.getEnableVoucherNum();
           
        },
        warehouse(){
            this.checkedEmp=2;
           this.getEnableVoucherNum();
        },
        loading(){
            this.checkedEmp=3;
           this.getEnableVoucherNum();
        },
        initData(){
            if(this.$route.query.startTime){
                this.startTime = this.$route.query.startTime;
                this.endTime = this.$route.query.endTime; 
            }

            if(this.token=="")
            {
                this.token=this.userInfo.token;
            }
            if(this.$route.query.checkedEmp)         
                this.checkedEmp = this.$route.query.checkedEmp;         
            this.getEnableVoucherNum();
        },
        async  getEnableVoucherNum(){
            console.log(this.token+"-"+this.startTime+"-"+this.endTime+"-"+this.flagTime+"-"+this.checkedEmp);
            let response = await StatisticalOfSale(this.token,this.startTime,this.endTime,this.flagTime,this.checkedEmp);
            if(response.resultMessage!="null")
           {
                this.startTime = response.resultMessage;
                this.endTime = '';
           }
            this.emps = response.data;
            console.log(this.emps);
           
            //this.voucherNum=response.data;
        },
    },
    watch: {
        $route: function (value){
            if (this.$route.query.startTime) {
              this.initData();
            }
        }
    }
}
</script>

<style lang="scss" scoped="">
    @import 'src/style/mixin';    

    .tab_section{
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        @include wh(100%, .88rem);
        line-height: .88rem;
        @include sc(.32rem, #333);
        background: #fff;
        .tab{
            flex: 1;
            text-align: center;
            margin: 0 .2rem;
        }
        .tab.active{
            color: $blue;
            border-bottom: .04rem solid $blue;
        }
    }
    .statistics_main{
        margin-top: 1.08rem;
        background: #fff;
        .choose_time{
            padding: .2rem .4rem 0rem .4rem ;
            display:flex;
            justify-content:space-around;
            li{

                
                @include wh(.92rem, .4rem);
               
                div{
                    @include wh(100%, 100%);
                    @include sc(.3rem, $blue);
                    text-align: center;
                    border-radius: .2rem;
                }
            }
            li:last-child{
                margin-right: 0;
                width: 2.1rem;
            }
            li.active{
                div{
                    background: $blue;
                    color: #fff;
                }
            }
        }
        .text{
            padding: .2rem .48rem 0;

            div{
                @include sc(.26rem, #666);
            }
        }
        .table{
            padding: 2rem 0 ;
            margin:0 .2rem  ;
            flex{

            }

            .row{

                display: flex;

                margin-bottom: .4rem;
                .cell{
                    flex: 1;
                    @include sc(.28rem, #333);
                    text-align: center;
                    height: .28rem;
                    line-height: .28rem;
                }
            }

            .head_row{
                margin-bottom: .32rem;
                .cell{
                    color: #666;
                }
            }
            .footer_row{
                margin-top: .02rem;
                margin-bottom: 0;
                .cell{
                    color: #c8574b;
                }
            }
             .fix{

                width:100%;
                height:.9rem;
                position:fixed;
                padding-top:.4rem;
                padding-left:.1rem;
                bottom:0;
                margin:0;
                margin-left:-.19rem;
                background-color:#eeeeee;
                .cell{
                    padding-right:.43rem
                }
                .cell:nth-of-type(1){
                     padding-left:.27rem
                }
                .cell:nth-of-type(2){
                     padding-right:.4rem;
                     padding-left:.1rem
                }
              
            }
        }
    }
    .header{
        position:fixed;
        background:#fff;
        top:1rem;
        left:0;
        width:100%
    }
    .flex{
        width:90%;
         height:.6rem;
         padding-top:.3rem;
         display:flex;
         position:fixed;
         top:2.2rem;
         left:.2rem;
         background-color:#fff !important;
        .cell{
                    flex: 1;
                    @include sc(.28rem, #333);
                    text-align: center;
                    height: .28rem;
                    line-height: .28rem;
                }
    }
</style>
